<template>
	<view class="g-main">
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item empty border-bottom sm-border">
				<text class="key required">请款人</text>
				<text class="value">{{ '赵飞帆' }}</text>
			</view>
			<view class="u-item empty border-bottom sm-border">
				<text class="key required">请款日期</text>
				<text class="value">{{ Date.now() | formatTime }}</text>
			</view>
			<view class="u-item arrow border-bottom sm-border" @tap="toPage('/pages/withdraw/selectBill')">
				<text class="key">单号</text>
				<text class="value" :class="{ ph: !dataForm.order_num }">{{ dataForm.order_num || '选择单号' }}</text>
			</view>
			<picker mode="selector" :range="whithdrawTypeList" :data-key="'whithdraw_type'" :data-list="'whithdrawTypeList'" @change="changeHandler">
				<view class="u-item arrow border-bottom sm-border">
					<text class="key required">请款类型</text>
					<text class="value" :class="{ ph: !dataForm.order_num }">{{ dataForm.order_num || '请选择请款类型' }}</text>
				</view>
			</picker>
			<view class="u-item price">
				<text class="key required">请款金额</text>
				<input type="digit" v-model="dataForm.whithdraw_num" placeholder="请选择请款金额" class="value" placeholder-class="ph" />
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-item border-bottom sm-border">
				<text class="key">收款信息</text>
				<radio-group name="" @change="changeCollectionHandler" class="f-frowceny f-mlauto f-fz14">
					<label class="f-frowceny f-mr15">
						<radio :value="1" color="#FF1E12" />
						<text style="color: #666666;">手动输入</text>
					</label>
					<label class="f-frowceny">
						<radio :value="2" color="#FF1E12" />
						<text style="color: #666666;">关联订单编号</text>
					</label>
				</radio-group>
			</view>
			<view class="u-item empty border-bottom sm-border">
				<text class="key required">收款人</text>
				<input type="text" v-model="dataForm.collection_man" maxlength="10" placeholder="请填写收款人" class="value" placeholder-class="ph" />
			</view>
			<picker mode="selector" :range="bankTypeList" :data-key="'collection_bank_type'" :data-list="'bankTypeList'" @change="changeHandler">
				<view class="u-item arrow border-bottom sm-border">
					<text class="key required">开户行</text>
					<text class="value" :class="{ ph: !dataForm.collection_bank_type }">{{ dataForm.collection_bank_type || '请选择开户行' }}</text>
				</view>
			</picker>
			<view class="u-item arrow">
				<text class="key required">收款人账户</text>
				<input type="number" v-model="dataForm.collection_bank_num" maxlength="20" placeholder="请填写收款人" class="value" placeholder-class="ph" />
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-textarea">
				<view class="key">请款用途</view>
				<u-textarea v-model="dataForm.withdraw_desc" :maxlength="50" :placeholder="'请填写请款用途'"></u-textarea>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="f-p15">
				<view class="key required">请款方式</view>
				<radio-group name="" @change="changeCollectionHandler" class="f-frowceny f-mlauto f-fz14 f-mt20">
					<label class="f-frowceny f-mr18">
						<radio :value="1" color="#FF1E12" />
						<text style="color: #666666;">转账</text>
					</label>
					<label class="f-frowceny">
						<radio :value="2" color="#FF1E12" />
						<text style="color: #666666;">现金</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="u-list f-bc-whilte f-mb7">
			<view class="u-textarea">
				<view class="key">备注</view>
				<u-textarea v-model="dataForm.withdraw_remark" :maxlength="100" :placeholder="'请填写备注'"></u-textarea>
			</view>
		</view>
		<view class="u-submit-btn-view"><button class="u-btn-primary f-fz16 f-fc-whilte">提 交</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataForm: {
				order_num: '', // 单号
				whithdraw_type: '', // 请款类型
				whithdraw_num: '', // 请款金额
				collection_man: '', // 收款人
				collection_bank_type: '', // 收款人开户行
				collection_bank_num: '', // 收款人开户账户
				withdraw_desc: '', // 请款用途
				withdraw_remark: '' // 请款备注
			},
			whithdrawTypeList: ['预请款', '首款', '尾款', '全款', '其他'],
			bankTypeList: ['招商银行', '中国银行']
		};
	},
	methods: {
		changeCollectionHandler(event) {
			const that = this;
			console.log(event);
		},
		/**
		 * changeHandler
		 * */

		changeHandler(event) {
			const that = this;
			let key = event.target.dataset.key;
			let list = event.target.dataset.list;
			that.dataForm[key] = that[list][event.detail.value];
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
